<template>
  <div>
    <div class="imgs">
      <el-upload
        :action="url"
        list-type="picture-card"
        :on-preview="handlePictureCardPreview"
        :on-remove="handleRemove"
        :on-success="handleAvatarSuccess"
      >
        <i class="el-icon-plus" style="font-size:14px">请选择图片</i>
      </el-upload>
      <el-dialog :visible.sync="dialogVisible">
        <img width="100%" :src="store.store_license_images" alt="" />
      </el-dialog>
    </div>

    <!--  -->
    <el-form
      :model="store"
      status-icon
      ref="ruleForm"
      label-width="100px"
      class="demo-ruleForm"
    >
      <div class="nameput">
        门店名称：
        <el-input
          placeholder="请输入门店名称"
          prefix-icon="el-icon-search"
          style="width:180px"
          v-model="store.store_name"
        >
        </el-input>
      </div>
      <!--  -->
      <div class="licenseput">
        营业执照：
        <el-input
          placeholder="请输入营业执照号码"
          prefix-icon="el-icon-search"
          style="width:180px"
          v-model="store.store_license_number"
        >
        </el-input>
      </div>
      <!--  -->
      <div class="addressput">
        营业地址：
        <el-input
          placeholder="请输入营业地址"
          prefix-icon="el-icon-search"
          style="width:500px"
          v-model="store.store_address"
        >
        </el-input>
      </div>
      <!--  -->
      <div class="locationput">
        定 位 ：
        <el-input
          placeholder="请输入定位"
          prefix-icon="el-icon-search"
          style="width:500px"
          v-model="store.store_location"
        >
        </el-input>
      </div>
      <!--  -->
      <div class="masterput">
        法 人 ：
        <el-input
          placeholder="请输入法人"
          prefix-icon="el-icon-search"
          style="width:500px"
          v-model="store.store_master"
        >
        </el-input>
      </div>
      <!--  -->
      <div class="telput">
        联系电话：
        <el-input
          placeholder="请输入联系电话"
          prefix-icon="el-icon-search"
          style="width:500px"
          v-model="store.store_tel"
        >
        </el-input>
      </div>
      <!--  -->
      <div class="specialput">
        特 色：
        <el-input
          placeholder="请输入特色"
          prefix-icon="el-icon-search"
          style="width:500px"
          v-model="store.store_special"
        >
        </el-input>
      </div>
      <!--  -->
      <div class="commissionput">
        佣金比例：
        <el-input
          placeholder="请输入佣金比例"
          prefix-icon="el-icon-search"
          style="width:500px"
          v-model="store.store_commission"
        >
        </el-input>
      </div>
      <!--  -->
      <div class="vipput">
        Vip等级：
        <el-input
          placeholder="该用户是否是vip?"
          prefix-icon="el-icon-search"
          style="width:500px"
          v-model="store.store_vip"
        >
        </el-input>
      </div>
    </el-form>
    <!--  -->
    <div class="add">
      <el-button type="primary" round @click="Add">申请</el-button>
    </div>
    <Modal v-show="isLoading"
      ><Center><Loading v-show="isLoading"/></Center
    ></Modal>
  </div> </template
>>

<script>
import { AddStore } from "@/services/StoreInfo";

import Loading from "@/components/Loading.vue";
import Modal from "@/components/Modal.vue";
import Center from "@/components/Center.vue";
export default {
  components: { Loading, Modal, Center },
  data() {
    return {
      isLoading: false,
      store: {
        store_name: "",
        store_license_number: "",
        store_address: "",
        store_location: "",
        store_master: "",
        store_tel: "",
        store_special: "",
        store_commission: "",
        store_vip: "",
        store_license_images: "",

        // 图片的data
      },
      url: "/api/pet_sys/upload.do",
      dialogImageUrl: "",
      dialogVisible: false,
    };
  },
  created() {
    this.isLoading = true;
    setTimeout(() => {
      this.isLoading = false;
    }, 200);
  },
  methods: {
    async Add() {
      //   var resp =await AddStore(this.store);
      // },
      this.$confirm("是否申请门店？", {
        confirmButton: "确定",
        confirmButton: "取消",
      })
        .then(async (resp) => {
          if (resp) {
            await AddStore(this.store).then((res) => {
              location.reload();
            });
          }
        })
        .catch((err) => err);
    },
    //
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
    },
    //
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePictureCardPreview(file) {
      console.log(file.url);
      this.store.store_license_images = file.url;
      this.dialogVisible = true;
      // console.log(store.store_license_images)
    },
  },
};
</script>
<style scoped>
.nameput {
  margin: 100px 320px 5px 0px;
}
.licenseput {
  margin: 0px 320px 5px 0px;
}
.addressput {
  margin: 0px 0px 5px 0px;
}
.locationput {
  margin: 0px -20px 5px 0px;
}
.masterput {
  margin: 0px -20px 5px 0px;
}
.telput {
  margin: 0px 0px 5px 0px;
}
.specialput {
  margin: 0px -30px 5px 0px;
}
.commissionput {
  margin: 0px 0px 5px 0px;
}
.vipput {
  margin: 0px -10px 5px 0px;
}
.add {
  margin: 20px 0px 0px 0px;
}
.imgs {
  margin: 0px 265px -100px 0px;
}</style
>>
